<template >
  <div style="padding: 20px">
    <a-list :grid="{ gutter: 16, column: 1 }">
      <a-radio-group
        v-decorator="['checkbox-group']"
        style="width: 100%"
        v-for="(item, index) in this_facets"
        :key="index"
        :name="'radioGroup' + index"
        :value="selectvalue"
      >
        <a-collapse :defaultActiveKey="activeKey">
          <a-collapse-panel
            :key="String(index)"
            :header="item.label"
            :style="customStyle"
            class="sliderhead"
          >
            <a-form-item>
              <div v-if="isShowFacetList">
                <a-row v-for="(op, i) in item.facetList" :key="i">
                  <a-col :span="20">
                    <a-radio
                      :value="op.id"
                      :data-id="op.id"
                      :name="item.id"
                      :checked="checked"
                      @change="ChangeFilter(op.id)"
                    >
                      &nbsp; &nbsp;
                      {{ op.name }}
                    </a-radio>
                  </a-col>
                  <a-col :span="4">
                    <a-badge
                      :count="op.count"
                      :overflow-count="999999999999"
                      :number-style="{ backgroundColor: '#52c41a' }"
                    />
                  </a-col>
                </a-row>
              </div>
            </a-form-item>
            <!-- <a
            slot="extra"
            href="#"
          >^</a> -->
          </a-collapse-panel>
        </a-collapse>
      </a-radio-group>
    </a-list>
  </div>
</template>

<script>
// import this.$store from "../components/this.$store";

export default {
  props: {
    // state: Object,
    // f: Array,
  },
  data: () => ({
    // slider
    activeKey: ["0", "1", "2"],
    checked: true,
    selectvalue: ["48"],
    customStyle: {
      background: "#2780e3",
      color: "#fff",
      border: "0",
    },
    headStyles: {
      color: "#2780e3",
      background: "#f5f5f5",
    },
    headStyless: {
      disply: "none",
    },
    optionsWithDisabled: [
      { value: "Apple", label: "apple" },
      { label: "Pear", value: "Pear" },
      { label: "Orange", value: "Orange", disabled: false },
    ],
  }),
  watch: {},
  computed: {
    //  slider
    this_facets() {
      var that = this;
      var facets = [];
      // if (this.$store.state[this.$store.state.Namedparent.name].books.rs.hasOwnProperty("facetsList")) {
      if (
        Object.prototype.hasOwnProperty.call(
          this.$store.state[this.$store.state.Namedparent.name].books.rs,
          "facetsList"
        )
      ) {
        var len1 = this.$store.state[this.$store.state.Namedparent.name].books
          .rs.facetsList.length;
        var label;
        var id;
        var value;
        var count;
        for (var i = 0; i < len1; i++) {
          var facet = [];
          var len2 = this.$store.state[this.$store.state.Namedparent.name].books
            .rs.facetsList[i].facetList.length;
          for (var j = 0; j < len2; j++) {
            label =
              that.$store.state[that.$store.state.Namedparent.name].books.rs
                .facetsList[i].facetList[j].config_name;
            id =
              that.$store.state[that.$store.state.Namedparent.name].books.rs
                .facetsList[i].facetList[j].id;
            value =
              that.$store.state[that.$store.state.Namedparent.name].books.rs
                .facetsList[i].facetList[j].config_name;
            count =
              that.$store.state[that.$store.state.Namedparent.name].books.rs
                .facetsList[i].facetList[j].count;

            facet[j] = {
              id: id,
              label: label,
              value: value,
              count: count,
              name: label,
              code: value,
            };
            // 检查过滤条件中是否已经被勾选
            var filters_len = this.$store.state[
              this.$store.state.Namedparent.name
            ].books.qs.filters;
            for (var fi = 0; fi < filters_len; fi++) {
              if (
                this.$store.state[this.$store.state.Namedparent.name].books.rs
                  .facetsList[i].facetsList[j].id ==
                this.$store.state[this.$store.state.Namedparent.name].books.qs
                  .filters[fi].id
              ) {
                if (
                  this.$store.state[
                    this.$store.state.Namedparent.name
                  ].books.qs.filters[fi].values.index(value)
                ) {
                  facet[j].checked = false;
                } else {
                  facet[j].checked = true;
                }
              }
            }
          }

          facets[i] = {
            facetList: facet,
            id: this.$store.state[this.$store.state.Namedparent.name].books.rs
              .facetsList[i].id,
            label: this.$store.state[this.$store.state.Namedparent.name].books
              .rs.facetsList[i].label,
          };
        }
        that.selectvalue = [];
        // this.$store.state[
        //   this.$store.state.Namedparent.name
        // ].books.qs.filters.forEach((item) => {
        //   console.log(item);
        //   that.selectvalue.push(item.values);

        // });
        that.selectvalue = this.$store.state[
          this.$store.state.Namedparent.name
        ].books.qs.site;
        // this.$store.state[this.$store.state.Namedparent.name].books.qs.filters
        //   .length > 0
        //   ? this.$store.state[this.$store.state.Namedparent.name].books.qs
        //       .filters[0].fieldName
        //   : [];
        // var folerts = this.$store.state[this.$store.state.Namedparent.name].books.qs.filters;
        // for(var ei=0;ei<folerts.length;ei++){
        //    for(var ej=0;ej<folerts[ei].values.length;ej++){
        //     that.selectvalue.push(folerts[ei].values[ej]);
        //   }
        // }
        // for(var j = 0 ; j < this.$store.state[this.$store.state.Namedparent.name].books.qs.filters.length;j++){
        //     // for(var i=0;i<this.$store.state[this.$store.state.Namedparent.name].books.qs.filters[j].values;i++){
        //     //   that.selectvalue.push(this.$store.state[this.$store.state.Namedparent.name].books.qs.filters[j].values[i]);

        //     // }
        // }
        return facets;
        // } else {
        //   console.log(
        //     "this.$store.state[this.$store.state.Namedparent.name].books.rs.facetsList.length:  is null ",
        //     this.$store.state[this.$store.state.Namedparent.name].books.rs.facetsList,
        //     this.$store.state[this.$store.state.Namedparent.name].books.rs
        //   );
        // }
      } else {
        return {};
      }
    },
  },
  methods: {
    // slider 操作  start
    isShowFacetList: function (facetList) {
      return facetList.length > 0;
    },
    ChangeFilterV2: function (e) {
      console.log("ChangeFilterV2: ", e);
    },
    // ChangeFilter: function (fieldclassName, id, code, name, do_search_book) {
    ChangeFilter: function (id) {
      this.$store.commit(
        this.$store.state.Namedparent.name + "/SHOW_DETAIL",
        false
      );
      this.$store.commit(
        this.$store.state.Namedparent.name + "/Changeloading",
        true
      );
      this.$store.commit(
        this.$store.state.Namedparent.name + "/ChangeCurrentPage",
        1
      );

      //  this.$router.push({
      //   path: "/BookSearch",
      //   query: { searchtitle: this.$route.query.searchtitle },
      // });
      return new Promise(() => {
        this.$store.commit(
          this.$store.state.Namedparent.name + "/ChangeCurrentPageWithOutSync",
          1
        );
        this.$store.commit(
          this.$store.state.Namedparent.name + "/SearchSideUpdateFilters",
          id
        );
        // this.$store.commit(
        //   this.$store.state.Namedparent.name + "/SearchSideUpdateFilters",
        //   {
        //     fieldName: id,
        //     value: code,
        //   },
        //   do_search_book
        // );
      });
      //   console.log("addFilters:", this.$store.state[this.$store.state.Namedparent.name].books.qs.filters);
    },
    // slider操作  end
  },
  mounted() {
    this.this_state = this.state;
  },
};
</script>

<style scoped>
/deep/.sliderhead .ant-collapse-header {
  color: #fff !important;
}
/* /deep/.sliderhead .ant-collapse-arrow{
  right: 15px;
  left: 0 !important;
} */
/deep/.ant-collapse-item:last-child > .ant-collapse-content {
  border-radius: 0;
}
/deep/.ant-form-item {
  margin-bottom: 0;
}
/deep/.ant-collapse {
  border-radius: 0;
  border-bottom: 1px solid #d9d9d9;
}
/deep/.ant-collapse > .ant-collapse-item {
  border-bottom: none;
}
/deep/.ant-checkbox-group {
  margin-bottom: 15px;
}
</style>